Ext.ns("FieldServiceDatabase");
FieldServiceDatabase.ProjectList = Ext.extend(Ext.tree.TreePanel, {
    initComponent: function(){
        FieldServiceDatabase.ProjectList.superclass.initComponent.call(this);
        this.getLoader().on('loadexception', function(loader, node, callback){
            Ext.MessageBox.confirm('Error', 'Network Temporarily not available, do you want to reload the tree node?', function(btn, text){
				if (btn=='yes') {
					loader.load(node)
				} 
			});
        });
        
        
    },
    
    id: 'invoice-panel',
    title: 'Field Forms',
    height: 500,
    minSize: 150,
    autoScroll: true,
    region: 'north',
    tbar: new Ext.Toolbar({
        items: [{
            xtype: 'button',
            text: 'Query',
            iconCls: 'find-icon',
            id: 'button-new-invoice'
        
        },{
            xtype: 'button',
            text: 'Upload',
            iconCls: 'upload-icon',
            id: 'button-upload'
        
        },
		{
            xtype: 'button',
            text: 'Edit',
            iconCls: 'icon-grid',
            id: 'button-edit'
        
        }]
    }),
    
    // tree-specific configs:
    rootVisible: false,
    lines: false,
    singleExpand: true,
    useArrows: true,
    
    loader: new Ext.tree.TreeLoader({
        dataUrl: '/projects'
    }),
    root: {
        nodeType: 'async',
        draggable: false,
        text: 'Invoices',
        //this id is used to load the tree automatically
        id: 'root'
    }
});

Ext.reg('projectlist', FieldServiceDatabase.ProjectList);
